<template>
  <div class="container" style="padding: 0;margin: 0;">
    <div class="grid-container">
      <div class="row row-1">
        <div class="w_full flex-col">
          <span class="title">签到人员信息</span>
        </div>
      </div>
      <div class="comm_border " style="margin-top: 16px; padding: 16px">
        <el-table :data="data.listTrainUser" border>
          <el-table-column prop="index" label="序号" width="60"/>
          <el-table-column prop="userName" label="人员名称"/>
          <el-table-column prop="signStartTimeStr" label="签到时间" width="200"/>
<!--          <el-table-column label="操作" width="120px">-->
<!--            <template #default="scope">-->
<!--              <el-button link size="small" @click="click_sign(scope.$index, scope.row)">签到码-->
<!--              </el-button>-->
<!--              <el-button link size="small" @click="click_userList(scope.$index, scope.row)">查看-->
<!--              </el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
      </div>
      <div class="row row-3 w_full">
        <div class="flex-row-center w_full"
             style="flex-direction: row-reverse ;margin-top: 14px;height: 50px;">
          <el-pagination
              v-model:current-page="pager.currentPage"
              v-model:page-size="pager.pageSize"
              :page-sizes="[10,20,30,50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pager.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, shallowRef} from "vue";
import {Plus, Search} from "@element-plus/icons-vue";
import {ExamType_Test} from "@/constants/Constants_ExamType";
import {ElNotification} from "element-plus";
import {tickAsTimeString, timeStrAsTick} from "@/utils/TimeUtil";
import {api_deleteExam, api_getExamList} from "@/request/apis/examApi";
import {ExamVO} from "@/type/vo/ExamVO";
import {addDialog} from "@/components/gDialog/index";
import router from "@/router";
import {ExamStatusAsString} from "@/utils/EnumHelper";
import msg from "@/components/msg";
import ExamCreate from "@/views/Exam/dialogs/ExamCreate.vue";
import ExamPublish from "@/views/Exam/dialogs/ExamPublish.vue";
import {useRoute} from "vue-router";
import {TrainingLessonsInfoVO} from "@/type/vo/TrainingLessonsInfoVO";
import {api_pageTrainUser} from "@/request/apis/trainApi";
import {QtBankVO} from "@/type/vo/QtBankVO";
import {TrainingUserInfoVO} from "@/type/vo/TrainingUserInfoVO";

const route = useRoute();
const trainingId = route.query.trainingId as string;

const data = reactive({
  listTrainUser:  Array<TrainingUserInfoVO>()
})

const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 10,
})


onMounted(async () => {
  // const data = "2175b2f5b2a0c79de664168010b63ef3f474e1ee1001f251eb32e804ccc7d2f5dffc9c692e249b8465e48bb0f22cedf6ffea09ffba78918edb3b9e1a449fcc2167144f6067a62e387a908ae37e81c11405635588af4bf07888aa3ba32e2985c5d356ce0983b3ae892fadf7185a0c5146331a653ecbfe1db9cd2a882f76d1bf590c0922257f5d4341e557eded823e02ad653ea3717b5c45270393905e5fc1f23a4cb120ed8282873c5a59123f7e30897e3fc984102fec8bc41f06f7e3db29a6b3021531996e578739e8372cdc1330096e333c94f320674fee1283e6ac09207343747d6c66f790a83933fb4c9a19b8a36435b52f7dd59f4f3022841a9807302657ef642b0d25f5b32fc1b9c706e3b8fb47d8ab90ab1594cf686247f4a0e55ce925b420320a5d9a4258646d07d2a67deeac2aba077ead1283a1a2724841265344105eff764049d7901a6b2f7ec349230847795b107ee10e5cf5f3845275b3663449bdc414743e0751a2a2a0ad3db902e92da94d6fb29271f0fc5058241092f8029c99f497ecb81600b7dcd68e61b6daca4866deecd777e43d8c8d5009fcf54fb8620fc706e42eb63754e4c622b12d4997acfb924c82119799db11215dec769d3c1fa70175decc568ecd31e18ad4c5a30fec7315629c7f640101b00d1bc2695474d2fb360f0cff438ea258cf85136caf0e05c04030ee71440215388b0ac857106f6bec1c950719cd08207548f17d7f9348932411f5c80dcdf3fddb431ff186827090eb38dba63fa0544c98b1ca2fda352fe3376fb3ed1213b17cf1ae2992c79dfe83fb11b4b62aaf2fe80d25cb624d0d81d9957f9b920bbc8040c0687306c618b143866dab24947b16e92b83d05341dff3164508dc6eca0f16a1663acaf256be918850b2e735cd5a37c969dc618d27858874c299d2e873b80867b77aeb0555b6cea75b8a9b27cce0f4dee917a8d20c55d482df6ee5bf3a95eadc97cf5b741ce4e371fef5a71cd682036bcf871b3c3a48221741cd1f74beb29fdbae0ee649a684e28a402654e981cdca883b15978a1da17d30991a5d87cef3218a3e9f3959f9a48807030d300ffc97a7c51cd30a96f25c02483be967b450f0ed973893b5fbaeb3ddf6fcf0a1c9eb0e8b1ce9bd3f42ff15a91ba962900b3da92ec269aa71af2631693967592602dc727608c33a6dc0a07a4ced0600424f1833e06190b7511e6c173982e45fe00d72943e04880f65d11d9c5e3222db37e245c826f63cfc2749e9f71e118369e738261ce0b9633ece0e7494e91e0821ddb6102bd94b57a84d1c231c135517010fe2dfd274e0daa0f3154ace619b4ee05f543259c29b5a8779ed127ad70132db856c75d1199c2dd0ab95ccf0e79c18692bcabef19dcb288b3b8eb030b9aee0dd36eb91c54c76d1570b1c45f7e888fd7cbd03478858d8d4dd75b01c51baf6df12042146bbfafae5d7f93db1a3b3e0becc939949991577313e95bee91b6bcd750b60cba5c64cba25d3759e2d89221e169a20b0519a3542c2f84a2deb0ebe1e28a711c9088fa6295ebd5bf02dc3d2775779cfe3ee90fdaf91401848bd6f2101c45533d326d9fbba93c5c606b15c89cf21052413ded4abf54d556f3ff2052c38fd513d2aa87d430b41d5c7a14bbd6f396ff0edf16dd79d8297aa41cb07119a120526d9f071228052d6c27679d11f4bdb8bc9446d4493133ae7e775578a43ce6f4c329323918ff21ac0c88c81cfce0c5ff161e61ad6802536ad0bd99accde40bf7df8f07dcc53ef76b89609e518f5e08cce56e9c3ca654b90de3111da8b76f5075b8a9b27cce0f4dee917a8d20c55d482df6ee5bf3a95eadc97cf5b741ce4e371547bf24af82b9a74c7f8e171419ab59c41cd1f74beb29fdbae0ee649a684e28a8a28c437c1494a1753e6c8e40cc254a31d1f3c56af5caaf69f1805f2b182acc71423b1e6f30315cb234626615f43a844a87516086eff44b11d2ce511bc9ccce4f810be999d3cef26f3cd36001737bc85adc77f2905dc891421af454a4e956d25bb8884809e7e9f912205773c1a329f31d38763170697622d98cf1dcc6bf97bfd61176230f245fa7864fc2db201ee2d7af4271c2fd99b2b1d4841eb5ae271bf4765dd2a27944acd63e2f4bad16e7635f0dc8a1d69359f8f2ce1eb511404a06dd57853623ce2ad851068958f0fad1b764130d4bc85026d61efd3d02fde96fa35c3ac660b44e94f929e23cf2dde2c55789e8838d2c54531383036398e1f11d4eb2143971165eab50969814bc856d321a0db53f0131d9756205e96cd5c2d93fb407f175392f06523a09c4629dc0fe3dad0bed566ddfb5ac65f429412cba73ca55a54820dcdba3bacdfc905079d2ced249cde8316fdc0bce5b8fc59ce6590e664ccdeeaf568732dd0c90059948cffe3c2e313688504f0ecc0cfcd7f7c790d57c0acb0aa3e26365ec6abc7fb0e35238d0d46e3a968db05ad3d64f59b8238ac51f9449cd7cdc7382c49a8523ec2246cb1ccdc52e9181111247c5cc12864ea5cb669f87b1613db16b37073d9611856e971fc4af84c329323918ff21ac0c88c81cfce0c5f35904836b57cf918ca326d6e845c36316086c317dfc41b992792e276197cebc319f75189ad631389da2503dc1e9c712c4b58f4e03d69eeb73d02f872be6c47049644e3850f753b31b989112c00ed8f38011782c1639de24e7eb81b8b4be9d06ea2b7e91dee1a314609f4980abf338c704ed71b4047c88e194f964a1b45fc7bb159642b9170c07aacc7dcf7313b4b2418cf21c5a4c89d9d6d2af31a015bf3360d28f8eb61c3b7f72b13b7821997ea0d1336af9df2f2c5f510da680d115dfc9759bc62c6371ffb27161328552333ca00ec73b96920535dc90dcf35e14f6531e7e68eca9f238c4614d501c6358394af63e41e25c594193f3a3e571d5d861375b8f8cca06aace121e6e8b9e54633758e7d202c84c50bf87eb39ed0791a380b6e7d9afd7840639e712bab97be4a61e127854c04c4d958821a7ef50a108c0c69f71aafde6075f3420df55b67789ee93e513ce7e9e5c915cff939420ec64f2292e580fb61bde97a123c6eac3d0ffe90a607e3107e6b44040442a19e2721b186c312e674857275dbb1ff37a24afccabba0d7da08c554b902e9e6e3ba3e6bc7068ec656e7d183d3e1672af73dd580af41cf6ac7c4c45533d326d9fbba93c5c606b15c89cf21052413ded4abf54d556f3ff2052c382d03a3de532809da002bccc31c935f10b431406cbb937ebf2880a6c97d5afe456ace7fecc337e5564f0c0a58c5a5e4c069921af4965ca33c49d1d824100a6c6826f14df2b121d28129dcb208f12ea6a78f1de4bafbb29242d8ea6f9c0544c6d7d9a5869e1a67900646b352c0bd21cff773b38cea5ebe394c46c3fd58fbbd1f47bf4f0436b7fe603edcea73f2fddf77049644e3850f753b31b989112c00ed8f384b3552c19216d2dc7f37bf053bb119b7b5470e8c2fac13b2de9599b862ec7001dd2354a2ebb3441d6c37ac9f223977e2561310fff414e45c124366017e04092735125b42a436c55213d8aa125f7182ce0d327a8c498a24eeb0370ce6da3829ed0e23bea26c69e70307e2cb77d95bd0563802a156b47e5174d385ff1583e775806f70c2009eaa0f9782186cad4df6437f08c9f39434fd032423545c412643db5b145726401f139c3960acac62ec570e80a89fcb6325fe23e59dcfc828f1a3b98490772896ccd8d58387686f9e6bc3dae40a532db8f902925d8f7ab71b7db486f9a68daaee4219a62ed7ac29402dc19d90a6840ab2d73bc1e141db662d85a64d313940ccc4ebf5d8f82a7571351d5d4c2ed173c028365821d2fd070b124b6197ccebb5427d04bb14e8e6c56a8285a5a3e71257878815a01b101b7cc8ecf4a71fb48316fdc0bce5b8fc59ce6590e664ccdeeaf568732dd0c90059948cffe3c2e313688504f0ecc0cfcd7f7c790d57c0acb0aa3e26365ec6abc7fb0e35238d0d46e3a968db05ad3d64f59b8238ac51f9449cd7cdc7382c49a8523ec2246cb1ccdc52e9181111247c5cc12864ea5cb669f87b1613db16b37073d9611856e971fc4af84c329323918ff21ac0c88c81cfce0c5f35904836b57cf918ca326d6e845c36316086c317dfc41b992792e276197cebc319f75189ad631389da2503dc1e9c712cccc56847ad4bfc72445590c02c2f6b2af37d77cb30b5e0c8f2f26ead760ae577f5e3123af205c8eae03502f1f52afbc864757126ce9920801906a55154bfb6b3270ad4dc5cdcf2cb87a96bdfb58bee76dd09bab038cf99a844b175f5b79ef5576dd36bfdcad1e006ed4f70a5daa469b0e6a0c337b00538d8217042d412dcd628ea5bd4b46cfbf20857c38e2b8513dbe78a7e17e48aa4fbd0ca1425bbe90b37285a008b39b48ee7d66724a26184aa35d77f20acb5cbbe52ec985136dd28e12eadc3cdb503ee236d5c9ad6e808102611f146eae5270e4bc8aea7fd817e6cd9d97066f85087a7ec2f1d89448a2af1a39cf578938901d8e2f45b9b67a11df547e90102a55dc7da9567005ae006ba8669211a95d1d6d23a30637338e0d542eae65e1f0816defcde7c370272d48de50aad326fa968db05ad3d64f59b8238ac51f9449c30629314d905349943fd65efb8b7b915cebc94a63eefea6a9c8fcd6b4cab8765ec2b2d9e40b776422a5c47a47b29a1ce399d8bf6889d407d0d522434a92085bd7456fbe1fc1dc89d75fafc2f3020dabafcc03c3a5d0510975d16a63fe38348dc297bc5d848c4536e95d9ca1940b8825f5ae9f64f2695f8ca5fbcc96a8c876aafecfefa33e319081f24a9fd56d26d8800955384a3b7acd2c77a0246b3fcbf4c64531fe850ac59adba257aa9a00c248f718f887b8c7b1dacf2b7b7cbbd919a826bdd7b343d6b5389de65426c41b362f9031e34ebcdbb83bfc51fb583359f015217c648163f8fad178750aac52f7fdae825c9181e866e72899f7f90598e1b7673ecc06da7b9d1a7da04c2ee535dc0210868002e93d459d66cdd77dc2e2fb9e3d7b79f6979790d6356a037c5eff2b19d06abdd09bab038cf99a844b175f5b79ef5576dd36bfdcad1e006ed4f70a5daa469b0e6a0c337b00538d8217042d412dcd628ea5bd4b46cfbf20857c38e2b8513dbe78a7e17e48aa4fbd0ca1425bbe90b37285a008b39b48ee7d66724a26184aa35d77f20acb5cbbe52ec985136dd28e12ead8d291177d524f18168b8f7015675d8ce46eae5270e4bc8aea7fd817e6cd9d97066f85087a7ec2f1d89448a2af1a39cf578938901d8e2f45b9b67a11df547e90102a55dc7da9567005ae006ba8669211a95d1d6d23a30637338e0d542eae65e1f0816defcde7c370272d48de50aad326fa968db05ad3d64f59b8238ac51f9449c30629314d905349943fd65efb8b7b915cebc94a63eefea6a9c8fcd6b4cab8765ec2b2d9e40b776422a5c47a47b29a1ce399d8bf6889d407d0d522434a92085bd7456fbe1fc1dc89d75fafc2f3020dabafcc03c3a5d0510975d16a63fe38348dc297bc5d848c4536e95d9ca1940b8825f5ae9f64f2695f8ca5fbcc96a8c876aafecfefa33e319081f24a9fd56d26d8800955384a3b7acd2c77a0246b3fcbf4c64531fe850ac59adba257aa9a00c248f718f887b8c7b1dacf2b7b7cbbd919a826bdd7b343d6b5389de65426c41b362f9031e34ebcdbb83bfc51fb583359f015217c648163f8fad178750aac52f7fdae825c9181e866e72899f7f90598e1b7673ecd3ed26442226b7bd928d2a8d7d0b73fe002e93d459d66cdd77dc2e2fb9e3d7b7ef5f8adf800eb8c91ea27669e5cba186fd318b0426ec830d155f4247b3edfd5c101b8f22350ba2d40dfe6fdd987fe7bed55b8df2715b6a847aba33eb6c694d3b7e40c282067a19e7557855db4f7169d34a9344f09cc5f193fa61afd7bc662d930e2c7e34d5965b41eebf1571783d99d004e97407cefe2603e52861aa1e9b461aba4e9de4d5150a076577d250e76921a3d20d7dbc459e6bdef376f67dc3adba54122ae069e0ef3910527a3156b0c27283c802428e0970b78d349b3a8c1ed4d1f123ae3f52bb40684b0db13bd625ba75a6cfe7d1199b880afdd060bdc1cebab9dd1bb048d9b9af425269d8b3c646ef11a9a94d6fb29271f0fc5058241092f8029c99f497ecb81600b7dcd68e61b6daca484dd6cf5492cd2fd16a90e43611ad3abbf7d2d4e63d811f7df5a22797d44dcd3828a711c9088fa6295ebd5bf02dc3d277a5cf127f26f07b4cb88cdfb4af1a2cd95abf63c60721322e071fd3930b399bdd33358b8669879e09e1add042fbbb8658afdf0bb1c34dc534da047b6b3d044481ece3e032ade41824f6948e752d0aa1f9955d3fb7d4541d6438849f9bfce864609fc6eb3106dfc6d0239a78ebdc5a6a9516b92435a1a2459050176d8f4d6cfd1efe3bedfa51eac2e0b1f5b28fb2339e6ffb45c99ceae7358511e0e653659f06fc8b282ce0d153f0ffb9ff22859f012ab69c4647f9496579f803bdbd9e4fd1b73c410be1627123f07c69ed4ebcb3ef62bef5cdd14628d36e1981d0a43e38e7e5e3d58f417a8123997d03dff498fa1412f660f3e6c434e1d646cee622272e487cbd59642b9170c07aacc7dcf7313b4b2418cf21c5a4c89d9d6d2af31a015bf3360d28f8eb61c3b7f72b13b7821997ea0d1336af9df2f2c5f510da680d115dfc9759bc62c6371ffb27161328552333ca00ec73b96920535dc90dcf35e14f6531e7e6676fdd36fbd3a68171caf449d294e0c4e360ea3c73648127d233d1780b8f4718cca06aace121e6e8b9e54633758e7d20e8973a3fe2ae37495183ac3bf6b9d67efd7840639e712bab97be4a61e127854cd6299181efff96bf096ec39b78a7570fde6075f3420df55b67789ee93e513ce7e9e5c915cff939420ec64f2292e580fb61bde97a123c6eac3d0ffe90a607e3107e6b44040442a19e2721b186c312e674857275dbb1ff37a24afccabba0d7da08c554b902e9e6e3ba3e6bc7068ec656e7d183d3e1672af73dd580af41cf6ac7c4c45533d326d9fbba93c5c606b15c89cf21052413ded4abf54d556f3ff2052c382d03a3de532809da002bccc31c935f10b431406cbb937ebf2880a6c97d5afe456ace7fecc337e5564f0c0a58c5a5e4c069921af4965ca33c49d1d824100a6c6826f14df2b121d28129dcb208f12ea6a78f1de4bafbb29242d8ea6f9c0544c6d7d9a5869e1a67900646b352c0bd21cff773b38cea5ebe394c46c3fd58fbbd1f47bf4f0436b7fe603edcea73f2fddf7704d338a073f91f757275fab77a3803d700764e2bba5c773550f693ee88232f218e3bf9453f237f8d347a2364a1459092ac1db6db095f07da778d38a71602e39141561310fff414e45c124366017e04092735125b42a436c55213d8aa125f7182ce0d327a8c498a24eeb0370ce6da3829ed0e23bea26c69e70307e2cb77d95bd0563802a156b47e5174d385ff1583e775806f70c2009eaa0f9782186cad4df6437f08c9f39434fd032423545c412643db5b37c3c9a62c9f3b879a6ffa5e73b67841a89fcb6325fe23e59dcfc828f1a3b98490772896ccd8d58387686f9e6bc3dae40a532db8f902925d8f7ab71b7db486f9a68daaee4219a62ed7ac29402dc19d90a6840ab2d73bc1e141db662d85a64d313940ccc4ebf5d8f82a7571351d5d4c2ed173c028365821d2fd070b124b6197ccebb5427d04bb14e8e6c56a8285a5a3e71257878815a01b101b7cc8ecf4a71fb48316fdc0bce5b8fc59ce6590e664ccdeeaf568732dd0c90059948cffe3c2e313688504f0ecc0cfcd7f7c790d57c0acb0aa3e26365ec6abc7fb0e35238d0d46e3a968db05ad3d64f59b8238ac51f9449cd7cdc7382c49a8523ec2246cb1ccdc52e9181111247c5cc12864ea5cb669f87b1613db16b37073d9611856e971fc4af84c329323918ff21ac0c88c81cfce0c5f35904836b57cf918ca326d6e845c36316086c317dfc41b992792e276197cebc319f75189ad631389da2503dc1e9c712c8e334fc9ba3df14a730b62b98b7bed7818524102b75dcd9c194136d62c192631fbbd129733d117a0af4e72772d491198e56743e04d6d4a6b8f06a285fb09cad3398923ec19a18844b637efa5da40d20a72c1241db57b41337704087e5ff429adbdac500f3db2d641b749520c89fa5caa28a86c7a467e11790a45d37416a5606feb1b1184a3ef925a2fdf068e9c36f52dff280878a6083488948c53492d00cad62ce622cd7ef310208a2ffb59a52f6d9e620c8ba607f94137ee1462da82053bc779890cbfa6421353015c6f1a8b4b2a5cffaae4d97864938b2f797e35b75ade6618b27383d533135f2f5aa6965b232172d95cfc106156ade0f661d3e69207e6a741654ba406e0bfb827f8658754cc9464c33721745c837171d00395f9ccea20b25e876afa466652c271607c0b98877f1857bcd30f22b6fc33739c77e087100065f5a2843ad10494ba81f4a80459bb2fa25a55ca9767ef9b79d0662e8dad13050022e8912394e3e8fa6b883d05b698cc5a02e8f6151c505294920d9d3c88c1c9376c0a7c9f4aebaf534d75aeb14c88b5e49078c4f042cbb23139d30c552669abf01c283e155efba53263839da508423d6b";
  // console.log('s1', data);
  // let s = decryptByCssd(data);
  // console.log('s2', s);
  await search_pri();
})

const click_edit_naire = (exam: ExamVO) => {
  router.push({
    path: '/examEditView',
    query: {
      examId: exam.examId
    }
  })
}

const click_go_examUser = (exam: ExamVO) => {
  router.push({
    path: '/examItemUserView',
    query: {
      examId: exam.examId
    }
  })
}

const click_create = () => {
  try {
    addDialog({
      title: "请输入名称",
      component: shallowRef(ExamCreate),
      width: "800px",
      props: {},
      callBack: (dRet: boolean, examId: string) => {
        console.log('dRet', dRet);
        console.log('name', examId);
        if (dRet) {
          //跳转页面
          router.push({
            path: '/examEditView',
            query: {
              examId: examId
            }
          })
          // ElMessage(`创建成功!!${name}`);
          return;
        } else {
          // tableList.data[index as number] = data
        }
        console.log(data, "data")
      }
    })
    // 处理确认操作
  } catch (error) {
    // 处理取消操作
  }

}

const click_publish = (exam: ExamVO) => {
  try {
    addDialog({
      title: "发布考试",
      component: shallowRef(ExamPublish),
      width: "600px",
      props: {examId: exam.examId},
      callBack: async (dRet: boolean) => {
        if (dRet) {
          await click_search();
        }
      }
    })
    // 处理确认操作
  } catch (error) {
    // 处理取消操作
  }
}
const click_delete = async (exam: ExamVO) => {
  try {
    const rDialog = await msg.yesNo(
        `是否确认删除考试 ${exam.title}?`,
        '警告'
    );
    if (rDialog) {
      const r = await api_deleteExam(exam.examId);
      if (!r) {
        await msg.info('数据异常');
        return;
      }
      if (r.code != 0) {
        await msg.info(`数据异常!  ${r.code} msg：${r.msg}`);
        return;
      }
      await search_pri();
      ElNotification({
        title: '提示',
        message: '已删除!',
      })
    }
  } catch (error) {
    // 处理取消操作
  }
}

const search_pri = async () => {
  console.log('dtStart', data.dtStart);
  data.listTrainUser.length=0;
  const limit = pager.pageSize;
  const page = pager.currentPage;

  const r = await api_pageTrainUser(trainingId,
      page,
      limit);
  if (!r) {
    await msg.info('数据异常');
    return;
  }
  if (r.code != 0) {
    await msg.info(`数据异常!  ${r.code} msg：${r.msg}`);
    return;
  }
  if (r.data.records) {
    for (let i = 0; i < r.data.records.length; i++) {
      r.data.records[i].index = i + 1;
      r.data.records[i].signStartTimeStr = tickAsTimeString(r.data.records[i].signStartTime);
      r.data.records[i].signEndTimeStr = tickAsTimeString(r.data.records[i].signEndTime)
    }
  }

  data.listTrainUser = r.data.records;
  pager.total = r.data.total;
}

const click_search = async () => {
  await search_pri();
};

const handleSizeChange = async (val: number) => {
  await search_pri();
}
const handleCurrentChange = async (val: number) => {
  await search_pri();
}

</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-1,
.row-3 {
}

.row-2 {
  overflow: auto;
}

.scrollable-content {

  line-height: 1.5em;
}


.title {
  font-size: 24px;
  font-weight: 600;
  color: #0A1629;
  line-height: 28px;
}

.label_title {
  font-size: 16px;
  font-weight: 400;
  color: #595959;
  line-height: 24px;
}

.date-picker {
  height: 48px;
  color: black;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #DCDCDC;
}

.el-scrollbar__view {
  height: calc(100% - 100px); /* 根据实际情况调整高度 */
}

.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  margin: 10px;
  color: var(--el-color-primary);
  overflow: hidden;
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.naireName {
  font-size: 20px;
  font-weight: 400;
  color: #0A1629;
  line-height: 24px;
}

.status {
  font-size: 16px;
  font-weight: 400;
  color: #0A1629;
  line-height: 24px;
  margin-left: 7px;
}

.btn1 {
  border: none;
  margin-left: 24px;
  width: auto;

  padding: 0;
}


</style>
